<template>
  <div class="my">
    <div class="user-msg">
      <div class="user-image">
        <!-- <img src="../assets/touxiang.png" alt /> -->
        <van-uploader v-model="fileList" :after-read="afterRead" :max-count="1" :deletable="false" />
        <!-- <p @click="changeImg" v-if="isChange">更改头像</p>
        <p @click="confirmChange" v-if="!isChange">确认更改</p> -->
      </div>
      <div class="msg">
        <span>用户名：{{user.userName}}</span>
        <span>ID：{{user.id}}</span>
      </div>
    </div>
    <div class="list">
      <ul>
        <li>
          <router-link :to="{path:'/withdraw',query:{balance:user.balance}}">
            <span>余额</span>
            <span>￥{{user.balance}}</span>
            <div class="jiantou"></div>
          </router-link>
        </li>
        <li>
          <router-link to="/myTask">
            <span>我的任务</span>
            <div class="jiantou"></div>
          </router-link>
        </li>
        <li>
          <router-link to="/revise">
            <span>修改密码</span>
            <div class="jiantou"></div>
          </router-link>
        </li>
        <li @click="remove">
          <span>退出登录</span>
          <div class="jiantou"></div>
        </li>
        <li @click="deleteUser">
          <span>注销账号</span>
          <div class="jiantou"></div>
        </li>
        <li>
          <span>更多功能敬请期待....</span>
        </li>
      </ul>
    </div>

    <my-footer></my-footer>
  </div>
</template>
<script>
import MyFooter from "../components/MyFooter.vue";
import { mapState } from "vuex";
import { baseURL } from "../http/require.js";

// 局部
import Vue from "vue";
import { Dialog } from "vant";
import axios from "axios";
// 全局注册
Vue.use(Dialog);

let formData = null;
export default {
  watch: {
    user: {
      deep: true,
      immediate: true,
      handler(n, o) {
        // console.log({n});
        // if(n.userName =='undefined' || n.userName == undefined){
        //     this.isShow = false
        // }else {
        //     this.isShow = true;
        // }
      }
    }
  },
  data() {
    return {
      fileList: [],
      isChange: true,
      token: ""
    };
  },
  components: {
    MyFooter,
    [Dialog.Component.name]: Dialog.Component
  },

  methods: {
    remove() {
      // console.log(1111);
      function beforeClose(action, done) {
        if (action === "confirm") {
          setTimeout(done, 1000);
          localStorage.removeItem("token");
        } else {
          done();
        }
      }
      Dialog.confirm({
        title: "提示",
        message: "你确定要退出吗?",
        beforeClose
      })
        .then(() => {
          this.$router.push({ name: "login" });
        })
        .catch(() => {});
    },
    deleteUser() {
      let id = this.user.id;
      function beforeClose(action, done) {
        if (action === "confirm") {
          setTimeout(done, 2000);
          localStorage.removeItem("token");
        } else {
          done();
        }
      }
      Dialog.confirm({
        title: "提示",
        message: "你确定要注销账号吗?",
        beforeClose
      })
        .then(() => {
          axios
            .post(
              `${baseURL}/user/delete_user`,
              { id: id },
              {
                headers: "application/x-www-form-urlencoded"
              }
            )
            .then(response => {
              console.log(response.data);
            });
          this.$router.push({ name: "login" });
        })
        .catch(() => {});
    },
    afterRead(content) {
      formData = new FormData();
      formData.append("photo", content.file);
      formData.append("id", this.user.id);
    },
    changeImg() {
      Dialog.confirm({
        title: "提示",
        message: "是否更改头像"
      })
        .then(() => {
          this.fileList = [];
          this.isChange = false;
        })
        .catch(() => {
          // on cancel
        });
    },
    confirmChange() {
      axios
        .post(`${baseURL}/user/changeImg`, formData, {
          headers: "application/x-www-form-urlencoded"
          // 'Authorization':'Bearer' + this.token
        })
        .then(response => {
          if (response.data.code == 200) {
            this.isChange = true;
            // location.reload();
          }
        });
    }
  },
  computed: {
    // 映射user模块
    ...mapState(["user"])
  },
  created() {
    this.fileList = [{ url: this.user.touxiang }];
    this.token = localStorage.getItem("token");
  }
};
</script>
<style lang="scss" scoped>
@import "../css/reset.css";
.my {
  width: 100%;

  .user-msg {
    width: 100%;
    height: 150px;
    background-color: #faca2a;
    display: flex;
    align-items: center;
    .user-image {
      width: 100px;
      height: 100px;
      padding-left: 15px;
      p {
        text-align: center;
        padding-right: 15px;
        color: #fff;
        font-size: 0.875rem;
      }
    }
    .msg {
      display: flex;
      flex-direction: column;
      flex-grow: 3;
      span {
        font-size: 20px;
        color: #fff;
        margin-left: 20px;
      }
    }
  }
  .list {
    width: 100%;
    margin-top: 20px;
    ul {
      width: 100%;
      li {
        width: 100%;
        height: 50px;
        line-height: 50px;
        background-color: #fff;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        margin-top: 10px;
        position: relative;
        a {
          display: block;
        }
        span {
          padding-left: 15px;
        }
        .jiantou {
          width: 10px;
          height: 10px;
          border-right: 3px solid #ccc;
          border-top: 3px solid #ccc;
          transform: rotate(45deg);
          position: absolute;
          top: 20px;
          right: 20px;
        }
      }
    }
  }
}
</style>